<template>
    <div class="package_detail">
        <headerBar :title="detail.name"></headerBar>
        <div class="red">>> 包含有以下精彩游戏 <<</div>
        <van-row class="package_list">
            <van-col span="24" v-for="(item,index) in detail.show_game_list" :key="index" class="package_img">
                <img :src="item.icon" alt="" v-if="item.icon">
                <img src="../assets/images/default.png" alt="" v-else>
            </van-col>
        </van-row>
    </div>
</template>

<script>
import Bet from "@/components/bet.vue";
import Bootom from "@/components/bottom.vue";
import headerBar from "@/components/headerBar";

import {
  getPackageDetail
} from "@/apis/apis";

export default {
  components: {
    Bootom,
    headerBar
  },
  data() {
    return {
      detail: {
        name: "",
        price: "",
        resource_uri: "",
        show_game_list: [],
      },
      showWrapper: false
    };
  },
  methods: {
    getPackageDetail(name) {
      return getPackageDetail(name).then(res => {
        this.detail = res;
      });
    }
  },
  mounted() {
    const show_name = this.$route.params.name;
    if (show_name) this.getPackageDetail(show_name);
  }
};
</script>


<style lang="scss" scoped>
.package_detail {
    padding-bottom: 90px;
    background-image: url('../assets/images/presence.png');
    background-repeat: repeat;
}



.red {
  font-size: 22px;
  font-weight: 700;
  width: 80%;
  margin-left: 10%;
  display: inline-block;
  color: #ffc220;
  border-bottom: 1px #2e2e2e solid;
  padding: 85px 0 6px;
  text-align: center;
}
.package_list {
  padding: 15px 15px 0;
  min-height: calc(100vh - 130px);
}

.package_img {
  text-align: center;
  margin: 10px auto;

  img {
    border-radius: 10px;
    border: 1px #999 solid;
    height: 105px;
    width: 230px;
  }
}
</style>
